<template>
  <div class="w-10 f-48 bk-c-w">
    <div class="block-ct"  v-for="(item,index) in aMsg" :key="index">
      <div class="flex-c item-ct"  @click="showMsg(index)">
        <div class="flex-c line-h name-ct" :style="{color:getType(item.type)}">
          [{{item.type}}]
        </div>
        <div class="flex content-ct">
           <div class="line-h date-ct">[{{item.pubTime|dateFilter}}]</div>
           <div class="line-h ellipsis">{{item.title}}</div>
        </div>
      </div>
      <div class="pd-3 msg-ct" v-show="current===index">{{item.msg}}</div>
    </div>
    <div v-if="aMsg<=0" class="no-data">暂无消息~</div>
  </div>
</template>

<script>
// import md5 from 'js-md5'
import moment from 'moment'
import captchaButton from '@/components/common/captcha-button.vue'
import sowingMap from '@/components/common/sowingMap'
import { mixinParams } from '@/vmixin/vmixin'
import { getSysNoticeList } from '@/service'

export default {
  data () {
    return {
      aMsg: [{
        'id': 111,
        'type': '提示',
        'pubTime': '2019-02-22 22:10:08',
        'title': '测试内容消息',
        'msg': '大家好，这是测试的文章内容主体,这是一段提示性的文字信息,',
        'readStatus': 0
      }, {
        'id': 111,
        'type': '异常',
        'pubTime': '2019-02-22 22:10:08',
        'title': '测试内容消息2',
        'msg': '这是一个异常消息，你要小心啊，大家好，这是测试的文章内容主体2',
        'readStatus': 0
      }, {
        'id': 111,
        'type': '警告',
        'pubTime': '2019-02-22 22:10:08',
        'title': '测试内容消息',
        'msg': '大家好，这是测试的文章内容主体，这是警告，一定要注意',
        'readStatus': 0
      }, {
        'id': 111,
        'type': '活动',
        'pubTime': '2019-02-22 22:10:08',
        'title': '测试内容消息2',
        'msg': '大家好，这是测试的文章内容主体2，快来看这个活动，挺好的',
        'readStatus': 0
      }],
      current: -1
    }
  },
  created () {
    this.getSysNoticeList()
  },
  mounted () {},
  filters: {
    dateFilter (input) {
      if (!input) {
        return ''
      }
      return moment(input).format('YYYY-MM-DD')
    }
  },
  mixins: [mixinParams],
  components: {
    sowingMap,
    captchaButton
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    async getSysNoticeList () {
      let {mobile, cdkey} = this
      let oParams = {
        cdkey: cdkey,
        mobile: mobile
      }
      let msgResult = await getSysNoticeList(oParams)
      if (msgResult.result !== 1) {
        return false
      }
      this.aMsg = msgResult.values || []
      console.log('msgResult==============', msgResult)
    },
    showMsg (index) {
      this.current = index
    },
    getType (type) {
      let result = '#265CD9'
      switch (type) {
        case '提示':result = '#265CD9'; break
        case '异常':result = '#E6131F'; break
        case '警告':result = '#E5BB2A'; break
        case '活动':result = '#50E124'; break
      }
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.block-ct {
//   padding: 0 cmSize(60);
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.line-h{
    line-height: rpx(30);
}
.arr-right {
  width: cmSize(40);
  height: cmSize(40);
}
.item-ct {
  height: cmSize(150);
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}
.name-ct {
  flex: 0 0 2rem;
  border-right: 1px solid #eeeeee;
  height: 100%;
}
.content-ct{
    height: cmSize(150);
    align-items: center;
}
.date-ct{
 padding:0 cmSize(20);
 font-weight: bold;
}
.msg-ct{
padding: cmSize(50);
text-indent: 1em;
}
.ellipsis{
    width: cmSize(660);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.no-data{
    padding: cmSize(60) 0;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }
</style>
